<script>
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import QueryBar from '../components/queryBar.svelte';
    import Paging from '../components/paging.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { ModifyCommission,ModifyVfunds,ActiveFreezeUser,AgentListDashboard,AgentList } from '../api.js';
    import Query from '../model/query.js';
    import moment from 'moment';

    let btnText = '添加二级代理'
    let btnHref = "/agent/add"

    let data = {title:[ "UID","姓名","手机号","邀请码","身份证","邀请用户","开单数量","返佣比例","加入时间","身份","模拟资金管理","状态" ],data:[]}

    let total = 0;
    let agents = 0;
    let users = 0;

    // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.
    let query = new Query();
    onMount(()=>{
        // getInfo();
        getList();
    });

    window.modifyCommission = async function(uid){
        let val = event.target.value;
        await Post(ModifyCommission,{
            uid: Number(uid),
            commission: parseInt(val)
        })
    }

    window.modifyVFunds = async function(uid) {
        let val = event.target.value;
        await Post(ModifyVfunds,{
            uid: Number(uid),
            amount: val,
        })
         // console.log(uid,123)
    }

    async function getList(e){

       if(!!e) {
            query.start = e.detail.start
            query.end = e.detail.end
       }
       let ret = await Post(AgentList,query)
       query.total = ret.total;
        total = ret.total;
       let _data = [];
       if(!ret.list) ret.list = [];
       for(let item of ret.list) {
        let arr = [item.id,item.userinfo.name,item.phone,item.myInviteCode,item.userinfo.id,item.agentinfo.userCount,item.orderCount,
        `<textarea class="textarea" style="resize:none;height: 30px;font-size: 12px" onblur="modifyCommission(${item.id})" rows=1 cols=4>${parseInt(item.commission || 0)}</textarea>`,
        moment(item.createDate).format("YYYY-MM-DD hh:mm:ss"),"二级代理",
        `<textarea class="textarea" style="resize:none;height: 30px;font-size: 12px" onblur="modifyVFunds(${item.id})" rows=1 cols=4>${item.vfunds}</textarea>`,
        `<select on:click><option value=0>正常</option><option ${item.state == 1 && 'selected'} value=1>冻结</option></select>`];
        arr.id = item.id;
        arr.href = "/agent/users?agent_id="  + item.id
        arr.handler = changeState;
        _data.push(arr);
       }
       data.data = _data;
    }

    async function changeState(){
        event.stopPropagation()
        let _select = this.querySelector("select");
        let id = this.getAttribute("data-id");

        await Post(ActiveFreezeUser,{id: Number(id)});
        getList();
    }

    async function getInfo(){
        let ret = await Post(AgentListDashboard);
        if (!ret) return

        for(let item of ret) {
            if(item.key === "total") total = item.num;
            if(item.key === "agents") agents = item.num;
            if(item.key === "users") users = item.num;
        }
    }

    function setPage(page){
        query.page = page;
        getList();
    }

</script>

<div class="view">
    <div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
         class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            二级代理管理
        </span>
    </div>
    <div class="borderRadius4 container backBlue colorWhite " >
        <div class="columns" style="padding: 20px;">
            <div class="column is-2">
                <nav class="level">
                    <div class="level-item has-text-centered">
                        <div>
                        <p class="heading">二级代理人数</p>
                        <p class="font25 colorWhite">{total}</p>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="column is-8">
            </div>
            <div class="column is-2 btn">
                <Btn text={btnText} href={btnHref} />
            </div>
        </div>
    </div>
    <div class="container">
        <QueryBar query={query} on:message={getList}/>
    </div>
    <div class="container" style="margin-top:-10px">
        <List data={data}/>
    </div>
    <div class="container rowReverse">
        {#if query.total !== 0}
        <Paging page={query} handler={setPage}/>
        {/if}
    </div>
</div>

<style>
    .borderRadius4{
        border-radius: 4px;
    }
    .container {
        margin:20px 5px;
    }
    .info {
        background: #fff;
    }
    .btn {
        line-height: 5px;
        top: 50%;
        transform: translateY(10%);
    }
</style>
